# import streamlit as st
# from streamlit_navigation_bar import st_navbar
# # st.theme.base = 'Dark'

# st.set_page_config(layout="wide")
# page = st_navbar(["Home", "Documentation", "Examples", "Community", "About"])
# st.write(page)
import streamlit as st
from streamlit_navigation_bar import st_navbar
from st_on_hover_tabs import on_hover_tabs
# 定义导航栏的页面选项
navbar_pages = ["创新技术", "解决方案", "量产应用", "咨询动态", "使用文档"]

# 1. 定义样式字典
styles = {
    "nav": {
        "background-color": "#111111",  # 导航栏背景颜色
        "justify-content": "center",    # 对齐方式
        "height": "6rem",

    },
    # "hover":{
    #     "background-color": "#000000",  # 导航栏背景颜色
    # },
    "span": {   
        "color": "white",           # 常规文字颜色
        "padding": "1.7rem",
        "font-size": "1.2rem",
    },
    "hover": {
        "background-color": "#111111", # 鼠标悬停时的背景色
        "color": "#FFFFFF",            # 鼠标悬停时的文字色
    },
    "active": {
        "background-color": "#222222", # 激活页面的背景色
        "font-weight": "normal",
    },
}

# 2. 应用样式并创建导航栏
selected_page = st_navbar(navbar_pages, styles=styles)

# 根据选择渲染不同页面的逻辑
# st.title(f"当前页面: {selected_page}")


st.set_page_config(layout="wide")

st.header("悬停导航栏自定义标签组件")
st.markdown('<style>' + open('./style.css').read() + '</style>', unsafe_allow_html=True)


with st.sidebar:
    tabs = on_hover_tabs(tabName=['仪表盘', '资金', '经济'], 
                         iconName=['dashboard', 'money', 'economy'], default_choice=0)

if tabs =='仪表盘':
    st.title("导航栏")
    st.write('当前选项名称是 {}'.format(tabs))

elif tabs == '资金':
    st.title("论文")
    st.write('当前选项名称是 {}'.format(tabs))

elif tabs == '经济':
    st.title("汤姆")
    st.write('当前选项名称是 {}'.format(tabs))

